<script setup lang="ts">
import {ref} from "vue";
import {processNumber} from "@/utils";
import {useAnStore} from "@/stores";

const props = defineProps({
  item: {
    type: Object,
    default: () => ({})
  }
});

const anStore  = useAnStore()

const lists = ref([
      {
        title: '杭州市场总部',
        field:'hz',
      },
      {
        title: '绍兴市场总部',
        field:'sx',
      },
      {
        title: '嘉兴市场总部',
        field:'jx',
      },
      {
        title: '宁波市场总部',
        field:'nb',
      },
      {
        title: '金华市场总部',
        field:'jh',
      },
      {
        title: '无锡市场总部',
        field:'wx',
      },
      {
        title: '南京市场总部',
        field:'nj',
      }
    ])
</script>

<template>
  <div class="bg-l overflow-visible">
    <div class="flex justify-between pt-[71px] px-[44px] mb-[-30px] relative" :class="{
      item1: [0,6].includes(i),
      'item1-1': [0,6].includes(i) && i == anStore.anIndex,
      item2: [1,5].includes(i),
      'item2-1': [1,5].includes(i) && i == anStore.anIndex,
      item3: [2,3,4].includes(i),
      'item3-1': [2,3,4].includes(i) && i == anStore.anIndex,
    }" v-for="(list,i) in lists"
         :key="i">
      <div class="text-[#1A1A1A] text-[20px] absolute top-[24px] left-[57px] ff-YouSheBiaoTiHei">{{ list.title }}</div>
      <div class="flex flex-col items-center">
        <div class="text-[#FB2D19] text-[20px] font-medium ff-DINAlternate-Bold">
          <span class="text-[26px]">{{ processNumber(item[list['field']]?.['call'])[0] }}</span>
          <span v-if="processNumber(item[list['field']]?.['call'])[1]">.{{ processNumber(item[list['field']]?.['call'])[1] }}w</span>
        </div>
        <div class="text-[#1A1A1A] text-[16px]">外呼量</div>
      </div>
<!--      <div class="flex flex-col items-center">-->
<!--        <div class="text-[#FB2D19] text-[20px] font-medium ff-DINAlternate-Bold">-->
<!--          <span class="text-[26px]">{{ processNumber(item[list['field']]?.['wx'])[0] }}</span>-->
<!--          <span v-if="processNumber(item[list['field']]?.['wx'])[1]">.{{ processNumber(item[list['field']]?.['wx'])[1] }}w</span>-->
<!--        </div>-->
<!--        <div class="text-[#1A1A1A] text-[16px]">加微量</div>-->
<!--      </div>-->
<!--      <div class="flex flex-col items-center">-->
<!--        <div class="text-[#FB2D19] text-[20px] font-medium ff-DINAlternate-Bold">-->
<!--          <span class="text-[26px]">{{ processNumber(item[list['field']]?.['visit'])[0] }}</span>-->
<!--          <span v-if="processNumber(item[list['field']]?.['visit'])[1]">.{{ processNumber(item[list['field']]?.['visit'])[1] }}w</span>-->
<!--        </div>-->
<!--        <div class="text-[#1A1A1A] text-[16px]">到访量</div>-->
<!--      </div>-->
      <div class="flex flex-col items-center">
        <div class="text-[#FB2D19] text-[20px] font-medium ff-DINAlternate-Bold">
          <span class="text-[26px]">{{ processNumber(item[list['field']]?.['sign'])[0] }}</span>
          <span v-if="processNumber(item[list['field']]?.['sign'])[1]">.{{ processNumber(item[list['field']]?.['sign'])[1] }}w</span>
        </div>
        <div class="text-[#1A1A1A] text-[16px]">签约量</div>
      </div>
      <div class="flex flex-col items-center">
        <div class="text-[#FB2D19] text-[20px] font-medium ff-DINAlternate-Bold">
          <span class="text-[26px]">{{ processNumber(item[list['field']]?.['over'])[0] }}</span>
          <span v-if="processNumber(item[list['field']]?.['over'])[1]">.{{ processNumber(item[list['field']]?.['over'])[1] }}%</span>
        </div>
        <div class="text-[#1A1A1A] text-[16px]">完结量</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.item1 {
  width: 490px;
  height: 170px;
  background: url("@/assets/img/item-1-0.png") 0 0 /100% 100%;
  transition: all .2s;
}

.item1-1 {
  width: 490px;
  height: 170px;
  background: url("@/assets/img/item-1-1.png") 0 0 /100% 100%;
  transition: all .2s;

  div{
    div:nth-child(1){
      font-family: 'YouSheBiaoTiHei-2', serif;
    }
  }
}

.item2 {
  width: 458px;
  height: 170px;
  background: url("@/assets/img/item-2-0.png") 0 0 /100% 100%;
  transition: all .2s;
}

.item2-1 {
  width: 458px;
  height: 170px;
  background: url("@/assets/img/item-2-1.png") 0 0 /100% 100%;
  transition: all .2s;
  div{
    div:nth-child(1){
      font-family: 'YouSheBiaoTiHei-2', serif;
    }
  }
}

.item3 {
  width: 414px;
  height: 170px;
  background: url("@/assets/img/item-3-0.png") 0 0 /100% 100%;
  transition: all .2s;
}

.item3-1 {
  width: 414px;
  height: 170px;
  background: url("@/assets/img/item-3-1.png") 0 0 /100% 100%;
  transition: all .2s;
  div{
    div:nth-child(1){
      font-family: 'YouSheBiaoTiHei-2', serif;
    }
  }
}
</style>
